import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Icon, Row, Col, List, Layout, Tooltip } from 'antd'
import { setLyricListAsync, setSequentialMode, setRandomMode, setLoopMode, setCurrentMusic, setPlaying ,setAudio,  } from '../../redux/actions'
import './Left.css'
const { Sider } = Layout;
class Left extends Component {
  constructor(props) {
    super(props)
    
  }
  componentDidMount(){
    this.props.setAudio(this.audio)
  }

  setSequentialMode = () => {
    this.props.setSequentialMode()
  }

  setRandomMode = () => {
    this.props.setRandomMode()
  }
  setLoopMode = () => {
    this.props.setLoopMode()
  }

  setCurrentMusic = (item,i) => {
    this.audio.pause()
    this.props.setLyricListAsync(item)
    this.props.setCurrentMusic(i)
    this.props.setPlaying(true)
    this.render()
  }
  render() {  
    return (
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
        onBreakpoint={broken => {
          console.log(broken);
        }}
        onCollapse={(collapsed, type) => {
          console.log(collapsed, type);
        }}
      >
        <Row className={"left-top"}>
          <Col span={8} className={this.props.palyMode == 1 ? 'activeMode' : ''}>
            <Tooltip title="单曲循环">
            <Icon type="retweet" onClick={this.setSequentialMode} />
            </Tooltip>
          </Col>
          <Col span={8} className={this.props.palyMode == 2 ? 'activeMode' : ''}>
          <Tooltip title="随机播放">
            <Icon type="swap" onClick={this.setRandomMode} />
            </Tooltip>
          </Col>
          <Col span={8} className={this.props.palyMode == 3 ? 'activeMode' : ''}>
          <Tooltip title="循环播放">
            <Icon type="redo" onClick={this.setLoopMode} />
            </Tooltip>
          </Col>
        </Row>
        {/**<audio id="now_music" src={`/music/${this.props.musicList[this.props.currentMusic]}.mp3` } autoplay></audio> */}
        <audio  ref={(audio)=>{this.audio = audio}} id="now_music" src={`/music/${this.props.musicList[this.props.currentMusic]}.mp3` } autoPlay='autoplay'></audio>
        <div className='musicList'>
          <List
            size="small"
            header={<div className='listHeader'>歌曲列表</div>}
            bordered
            dataSource={this.props.musicList}
            renderItem={(item, i) => {
              if (this.props.currentMusic == i) {
                return <List.Item onClick={() => { this.setCurrentMusic(item,i) }} ><Icon type="loading"  style={ {color: 'rgb(0,212,255)'}} />&nbsp;&nbsp;<span className='currentMusic musicName'>{item}</span></List.Item>
              } else {
                return <List.Item onClick={() => { this.setCurrentMusic(item,i) }} ><span className="musicName">{item}</span></List.Item>
              }
            }}
          />
        </div>
      </Sider>

    )
  }

}

// if(this.props.currentMusic == i){
//   return ( <Icon type="loading" /> <List.Item  onClick={()=>{this.setCurrentMusic(i)}} >{item}</List.Item> )
// }else{
//   return ( <Icon type="loading" /> <List.Item  onClick={()=>{this.setCurrentMusic(i)}} >{item}</List.Item> )
// }
const stateMap = state => {
  return {
    musicList: state.musicList,
    palyMode: state.palyMode,
    currentMusic: state.currentMusic
  }
}


const actionsMap = dispatch => {
  return {
    setLyricListAsync: (musicName) => {
      dispatch(setLyricListAsync(musicName))
    },
    setSequentialMode: () => {
      dispatch(setSequentialMode())
    }, setRandomMode: () => {
      dispatch(setRandomMode())
    },setLoopMode: () => {
      dispatch(setLoopMode())
    },setCurrentMusic: (i) => {
      dispatch(setCurrentMusic(i))
    },setPlaying: (playing) => {
      dispatch(setPlaying(playing))
    },setAudio: (audio) => {
      dispatch(setAudio(audio))
    },
  }
}



export default connect(stateMap, actionsMap)(Left);